<div class="animated fadeIn">

  <form [formGroup]="form" (ngSubmit)="addDataSource()">

    <div class="grid">
      <div class="col-12 ui-md-6">
        <div class="form-group">
          <label i18n="@@inputNombre">NOMBRE *</label>
          <input type="text" class="form-control" formControlName="name" id="eda_ds_name" pInputText>
        </div>
      </div>

      <div class="col-12 ui-md-6">
        <div class="form-group">
          <label i18n="@@inputTipo">TIPO *</label>
          <p-dropdown [options]="dbTypes" formControlName="type" id="eda_ds_type"
            i18n-placeholder="@@placholderSelectTipo" placeholder="Selecciona un tipo" optionLabel="name"
            [style]="{width:'100%', padding:'.35rem .75rem'}" (onChange)="selectDefaultPort()">
          </p-dropdown>
        </div>
      </div>

      <div  *ngIf="form.value.type && form.value.type.value ==='oracle'" class="col-6 ui-md-2">
        <div class="form-group">
          <label i18n="@@inputServidor">SERVIDOR *</label>
          <input type="text" class="form-control" formControlName="host" id="eda_ds_host" pInputText>
        </div>
      </div>

      <div *ngIf="!form.value.type || form.value.type.value !=='oracle'"  class="col-6 ui-md-3">
        <div class="form-group">
          <label i18n="@@inputServidor">SERVIDOR *</label>
          <input type="text" class="form-control" formControlName="host" id="eda_ds_host" pInputText>
        </div>
      </div>



      <div *ngIf="form.value.type && form.value.type.value ==='oracle'" class="col-6 ui-md-2">
        <div class="form-group">
          <label i18n="@@inputServidor">SID?</label>
          <p-dropdown [options]="sidOpts" formControlName="sid" placeholder='SID/SERVICE_NAME' optionLabel="name"
          [style]="{width:'100%', padding:'.35rem .75rem'}" > </p-dropdown>
        </div>
      </div>

      <div *ngIf="form.value.type && form.value.type.value ==='oracle'"  class="col-6 ui-md-2">
        <div class="form-group">
          <label i18n="@@inputNombreDb">BASE DE DATOS *</label>
          <input type="text" class="form-control" formControlName="db" id="eda_ds_db" pInputText>
        </div>
      </div>

      <div *ngIf="!form.value.type || form.value.type.value !=='oracle'"  class="col-6 ui-md-3">
        <div class="form-group">
          <label i18n="@@inputNombreDb2">BASE DE DATOS *</label>
          <input type="text" class="form-control" formControlName="db" id="eda_ds_db" pInputText>
        </div>
      </div>
      
      <div *ngIf="form.value.type && form.value.type.value ==='mysql'"  class="col-6 ui-md-2">
        <div class="form-group">
          <label i18n="@@inputPoolDb">Pool Limit</label>
          <input type="number" class="form-control" formControlName="poolLimit" id="eda_ds_pool" pInputText>
        </div>
      </div>

      <div class="col-6 ui-md-3">
        <div class="form-group">
          <label i18n="@@inputNombreEsquema">ESQUEMA</label>
          <input type="text" class="form-control" formControlName="schema" id="eda_ds_schema" pInputText>
        </div>
      </div>

      <div class="col-6 ui-md-3">
        <div class="form-group">
          <label i18n="@@inputPort">PUERTO *</label>
          <input type="number" class="form-control" formControlName="port" id="eda_ds_port" pInputText>
        </div>
      </div>

      <div class="col-12 ui-md-6">
        <div class="form-group">
          <label i18n="@@inputUsuario">USUARIO *</label>
          <input type="text" class="form-control" formControlName="user" id="eda_ds_user" pInputText>
        </div>
      </div>

      <div class="col-12 ui-md-6">
        <div class="form-group">
          <label i18n="@@inputPassword">CONTRASEÑA *</label>
          <input type="password" class="form-control" formControlName="password" id="eda_ds_password" pInputText>
        </div>
      </div>
    </div>



    <div class="footer text-right" style="background: none">
      <button type="submit" pButton icon="fa fa-save" i18n-label="@@guardarBtn" label="Guardar"
        id="eda_ds_guardar"></button>
    </div>


  </form>
  <div class="col-12 ui-md-6">
    <p-checkbox [(ngModel)]="optimize" label="Optimizar consultas" [binary]="true"></p-checkbox>
  </div>

</div>